<template>
  <div class="flex flex-col items-center justify-center h-screen bg-gray-50">
    <!-- 主Logo和文字区域 -->
    <div class="text-center">
      <!-- 爪子图标 + 文字组合 -->
      <div class="flex items-center justify-center mb-4">
        <!-- 橙色爪子图标 -->
        <div class="text-[clamp(2.5rem,10vw,4rem)] text-orange-500 mr-2">
          <i class="fa fa-paw"></i>
        </div>
        <!-- 橙色文字 -->
        <div class="text-[clamp(2.5rem,10vw,4rem)] font-bold text-orange-500">
          虾皮皮
        </div>
      </div>
      <!-- 标语 -->
      <p class="text-gray-500 text-[clamp(1rem,3vw,1.25rem)]">传播快乐</p>
    </div>

    <!-- 版本 + 跳过区域 -->
    <div class="absolute bottom-8 right-8">
      <button
          @click="skipToLogin"
          class="text-gray-500 text-sm hover:text-orange-500 transition-colors duration-300"
      >
        跳过 | v1.0.0
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SplashScreen',
  data() {
    return {
      loginPageUrl: '/login' // 登录页路由路径
    }
  },
  mounted() {
    // 3秒后自动跳转
    this.timer = setTimeout(() => {
      this.skipToLogin();
    }, 3000);
  },
  beforeUnmount() {
    // 清除定时器
    if (this.timer) {
      clearTimeout(this.timer);
    }
  },
  methods: {
    skipToLogin() {
      this.$router.push(this.loginPageUrl);
    }
  }
}
</script>

<style scoped>
/* 爪子图标样式优化 */
.fa-paw {
  transform: rotate(-15deg); /* 轻微旋转使图标更自然 */
}

/* 确保Font Awesome图标正确显示 */
@import url("https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css");
</style>
